import img from '@/assets/images/video-img.png';
import DPlayer from 'dplayer';
import { useEffect, useRef } from 'react';

const DPlayerComponent = (props: { url: string; cover?: string }) => {
  const { url, cover = img } = props;
  const dpRef: any = useRef(null);

  useEffect(() => {
    const dp = new DPlayer({
      container: dpRef.current,
      video: {
        url,
        pic: cover,
      },
    });
    dpRef.current = dp;

    return () => {
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      dp && dp.destroy();
    };
  }, []);

  return <div style={{ height: '100%' }} ref={dpRef} />;
};

export default DPlayerComponent;
